<template>
    <div>
        <div class="top-line">
            <div class="top-line-title">市场管理</div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="新生管理" name="student-tab"></el-tab-pane>
                <el-tab-pane label="学校管理" name="school-tab"></el-tab-pane>
                <el-tab-pane label="渠道管理" name="channel-tab"></el-tab-pane>
                <el-tab-pane label="市场分析" name="market-tab"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="table-content">
            <div class="table-item-box" v-show="cur==1">
                <Student></Student>
            </div>
            <div class="table-item-box" v-show="cur==2">
                <School></School>
            </div>
            <div class="table-item-box" v-show="cur==3">
                <div class="table-head-search"></div>
                <div class="table-head-content">当前结果：线索共计<span style="color: rgb(82,149,231);">99</span>条</div>
                <div class="content">
                    <el-table stripe style="width: 100%">
                        <el-table-column prop="schoolName" label="学校名称"></el-table-column>
                        <el-table-column prop="schoolAddress" label="学校地址"></el-table-column>
                        <el-table-column prop="life" label="学制" width="100px"></el-table-column>
                        <el-table-column prop="type" label="类型" width="100px"></el-table-column>
                        <el-table-column prop="userId" label="创建人"></el-table-column>
                        <el-table-column prop="createTime" label="创建时间"></el-table-column>
                        <el-table-column prop="isUsed" label="状态" width="100px"></el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="table-item-box" v-show="cur==4">
                <div class="table-head-search"></div>
                <div class="table-head-content">当前结果：线索共计<span style="color: rgb(82,149,231);">99</span>条</div>
                <div class="content">
                    <el-table stripe style="width: 100%">
                        <el-table-column prop="schoolName" label="学校名称"></el-table-column>
                        <el-table-column prop="schoolAddress" label="学校地址"></el-table-column>
                        <el-table-column prop="life" label="学制" width="100px"></el-table-column>
                        <el-table-column prop="type" label="类型" width="100px"></el-table-column>
                        <el-table-column prop="userId" label="创建人"></el-table-column>
                        <el-table-column prop="createTime" label="创建时间"></el-table-column>
                        <el-table-column prop="isUsed" label="状态" width="100px"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Student from "./Student";
    import School from "./School";

    export default {
        components: {School, Student},
        // vue的钩子函数
        created() {
        },
        data() {
            return {
                activeName: 'student-tab',
                cur: 1,
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab.name, event);
                // 发送请求
                if (tab.name == 'student-tab') {
                    this.cur = 1;
                } else if (tab.name == 'school-tab') {
                    this.cur = 2;
                } else if (tab.name == 'channel-tab') {
                    this.cur = 3;
                } else if (tab.name == 'market-tab') {
                    this.cur = 4;
                }
            },
        },
    }
</script>

<style lang="less" scoped>

</style>
